<template>
<transition name="slide-fade">
  <div class="screen" v-if="show"> 
    <div class="header">
      <van-icon class="header_back" name="arrow-left" @click='tonone' />
      <span>商品筛选</span>
    </div>
    <div class="content">
      <div class="price">
        <p>价格区间</p>
        <input type="text" name="" id="" placeholder="最低价" v-model="screenDate.minprice">—
        <input type="text" name="" id="" placeholder="最高价" v-model="screenDate.maxprice">
      </div>
      <div class="count">
        <p>起购量</p>
        <input type="text" name="" id="" placeholder="起购量" v-model="screenDate.batch">以下
      </div>
      <div class="express">
        <p>包邮</p>
        <button v-on:click="handleexpress" :class="expressCheck?'active':''">包邮</button>
      </div>
      <div class="coupon">
        <p>店铺券</p>
        <button v-on:click="handlecoupon" :class="couponCheck?'active':''">店铺券</button>
      </div>
      <div class="discount">
        <p>促销活动</p>
        <button v-on:click="handlediscount(1)" :class="discountCheck===1?'active':''">限时折扣</button>
        <button v-on:click="handlediscount(2)" :class="discountCheck===2?'active':''">全款预售</button>
        <button v-on:click="handlediscount(3)" :class="discountCheck===3?'active':''">定金预售</button>
        <button v-on:click="handlediscount(4)" :class="discountCheck===4?'active':''">秒杀活动</button>
      </div>
      <div class="kind">
        <p>经营类型</p>
        <button v-on:click="handlekind(1)" :class="kindCheck===1?'active':''">平台自营</button>
        <button v-on:click="handlekind(0)" :class="kindCheck===0?'active':''">三方店铺</button>
      </div>
      <div class="model">
        <p>销售模式</p>
        <button v-on:click="handlemodel(1)" :class="modelCheck===1?'active':''">零售型</button>
        <button v-on:click="handlemodel(2)" :class="modelCheck===2?'active':''">批发型</button>
        <button v-on:click="handlemodel(3)" :class="modelCheck===3?'active':''">虚拟型</button>
        <button v-on:click="handlemodel(4)" :class="modelCheck===4?'active':''">海外型</button>
      </div>
      <div class="gift">
        <p>赠品</p>
        <button v-on:click="handlegift" :class="giftCheck?'active':''">赠品</button>
      </div>
    </div>
    <div class="footer">
      <div v-on:click="reset">重置</div>
      <div class="active" v-on:click='pushData'>确定</div>
    </div>
  </div>
 </transition>
</template>
<script>
import Vue from 'vue';
import {  Icon  } from 'vant';

Vue.use(Icon);

export default {
  data(){
    return {
      screenDate:{
        // price:'10-50',
        minprice:'',
        maxprice:'',
        batch:'',
        express:0,
        voucher:0,
        promotion:0,
        own:1,
        modal:0,
        gift:0
      },
      expressCheck:false,
      couponCheck:false,
      discountCheck:0,
      kindCheck:false,
      modelCheck:0,
      giftCheck:false,
    }
  },
  computed: {
    show(){
      return this.$store.state.screen.show
    }
  },
  methods: {
    tonone(){
      this.$emit('data');
      this.$store.commit('screen/changeShow')
    },
    reset(){
      this.screenDate = {
        // price:'10-50',
        minprice:'',
        maxprice:'',
        batch:'',
        express:0,
        voucher:0,
        promotion:0,
        own:1,
        modal:0,
        gift:0
      },
      this.expressCheck = false,
      this.couponCheck =false,
      this.discountCheck = 0,
      this.kindCheck = false,
      this.modelCheck = 0,
      this.giftCheck = false,
      this.show = true
    },
    pushData(){
      this.screenDate.minprice===''?this.screenDate.minprice=0:this.screenDate.minprice;
      this.screenDate.maxprice===''?this.screenDate.maxprice=0:this.screenDate.maxprice;
      var data = {
        price:this.screenDate.minprice + '-' + this.screenDate.maxprice,
        batch:this.screenDate.batch,
        express:this.screenDate.express,
        voucher:this.screenDate.voucher,
        promotion:this.screenDate.promotion,
        own:this.screenDate.own,
        modal:this.screenDate.modal,
        gift:this.screenDate.gift
      }
      // console.log(data)
      this.$emit('data',data);
      this.$store.commit('screen/changeShow')
    },
    handleexpress(){
      this.expressCheck = !this.expressCheck;
      if(this.screenDate.express === 1){
        this.screenDate.express = 0;
      }else{
        this.screenDate.express = 1;
      }
    },
    handlecoupon(){
      this.couponCheck = !this.couponCheck;
      if(this.screenDate.voucher === 1){
        this.screenDate.voucher = 0;
      }else{
        this.screenDate.voucher = 1;
      }
    },
    handlediscount(index){
      if(this.discountCheck === index){
        this.discountCheck = 0;
        this.screenDate.promotion = 0;
      }else{
        this.discountCheck = index;
        this.screenDate.promotion = index;
      }
    },
    handlekind(index){
      if(this.kindCheck === index){
        this.kindCheck = false;
        this.screenDate.own = 1;
      }else{
        this.kindCheck = index;
        this.screenDate.own = index;
      }
    },
    handlemodel(index){
      if(this.modelCheck === index){
        this.modelCheck = 0;
        this.screenDate.modal = 0;
      }else{
        this.modelCheck = index;
        this.screenDate.modal = index;
      }
    },
    handlegift(){
      this.giftCheck = !this.giftCheck;
      if(this.screenDate.gift === 1){
        this.screenDate.gift = 0;
      }else{
        this.screenDate.gift = 1;
      }
    },
  },
}
</script>
<style lang='stylus' scoped>
  .slide-fade-enter-active 
    transition all .3s ease
  .slide-fade-leave-active 
    transition all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
  .slide-fade-enter, .slide-fade-leave-to
    transform translateX(10px)
    opacity 0
  .screen
    position absolute
    width 100%
    height 100%
    background white
    z-index 2000
    .header
      position fixed
      top 0 
      width  100%
      display flex
      height 0.44rem
      border-bottom 1px solid #f5f5f5
      background white
      .header_back
        font-size 0.2rem
        line-height 0.44rem
        margin-left 0.1rem
      span
        line-height 0.44rem
        font-size 0.15rem
        text-align center
        display block
        flex 1
        margin-right 0.2rem
    .content
      padding-top 0.44rem
      padding-left 0.242rem
      padding-bottom  0.42rem
      background white
      div
        margin-bottom 0.1rem
        p
          line-height 0.34rem
        input[type=text]
          width 1.5rem
          height 0.26rem
          line-height 0.26rem
          font-size 0.14rem
          background #F0F2F5
          text-align center
          border 0rem
          border-radius 0.03rem
          margin-right 0.085rem
        button
          width 1rem
          height 0.26rem
          line-height 0.26rem
          font-size 0.14rem
          background #F0F2F5
          text-align center
          border 0rem
          border-radius 0.03rem
          margin-right 0.085rem
          margin-bottom  0.085rem
          border 1px solid white
          &.active
            border 1px solid red
            color red
    .footer
      position fixed
      bottom 0
      display flex
      width 100%
      div
        width 50%
        line-height 0.42rem
        text-align center
        background white
        &.active
          color white
          background red
</style>